<template>
  <div class="loading-modal" v-show="isShow">
    <div class="circle"></div>
    <div>{{msg}}</div>
  </div>
</template>

<script>
export default {
  name: "messageboxEvent",
  data() {
    return {
      isShow: false,
      msg: "加载中",
    };
  },
  methods: {
    show(msg) {
      this.msg = msg || this.msg;
      this.isShow = true;
    },
    hide() {
      this.isShow = false;
      this.msg = "加载中";
    },
  },
};
</script>

<style lang="scss" scoped>
.loading-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  .circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 6px solid #222;
    border-left-color: #ccc;
    animation: loading 1s linear 1s infinite;
  }
}

@keyframes loading {
  0%{
    transform: rotate(0);
  }
  50%{
    transform: rotate(160deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
</style>